<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: zhuoxuan lin
 * @Date: 2023-06-29 15:32:23
 * @LastEditors: 何 海深 813936564@qq.com
 * @LastEditTime: 2023-12-01 20:18:16
-->
<template>
  <Teleport to="body">
    <div ref="loadingWrapDom" class="loading-wrap">
      <div class="loading-content"></div>
    </div>
  </Teleport>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, Ref, ref, watch } from 'vue'

interface PropsType {
  parentDom: HTMLElement | Element | HTMLBodyElement | any | null
}
const props = withDefaults(defineProps<PropsType>(), {
  parentDom: document.querySelectorAll('body')[0]
})
const loadingWrapDom: Ref<HTMLElement | null> = ref(null)
const init = () => {
  // console.log(props.parentDom);
  const domInfo = props.parentDom.getBoundingClientRect()
  // console.log(domInfo, props.parentDom.offsetTop, props.parentDom.offsetLeft);
  if (loadingWrapDom.value) {
    loadingWrapDom.value.style.width = domInfo.width + 'px'
    loadingWrapDom.value.style.height = domInfo.height + 'px'
    loadingWrapDom.value.style.top = domInfo.top + 'px'
    loadingWrapDom.value.style.left = domInfo.left + 'px'
  }
}
onMounted(() => {
  nextTick(() => {
    init()
  })
})
watch(
  () => props,
  () => {
    init()
  },
  { deep: true }
)
</script>
<style lang="scss" scoped>
.loading-wrap {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7000;
  background: rgba(0, 0, 0, 0.7);
}
.loading-content {
  width: 40vw * $Bw;
  height: 40vw * $Bw;
  border-top: 3vh * $Bh rgba(255, 98, 195, 0.867) solid;
  border-left: 3vh * $Bh rgba(224, 255, 84, 0.867) solid;
  border-right: 3vh * $Bh rgba(84, 255, 198, 0.867) solid;
  border-bottom: 3vh * $Bh rgba(84, 101, 255, 0.867) solid;
  border-radius: 50% 50%;
  animation: loading infinite 1s linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
